<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>智慧校园</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">


    <!--    <link href="../static/indexSearch/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="../static/indexSearch/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="static/indexSearch/css/zzsc.css">
    <link rel="stylesheet" type="text/css" href="../static/indexSearch/css/xxx.css">


    <style>
        a.more {
            font-size: 14px;
            color: cornflowerblue;
            font-weight: normal;
            background: lightcyan;
            border-radius: 20px;
            margin-right: 100px;
            display: block;
            width: 120px;
            height: 30px;
            line-height: 30px;
            float: right;
            text-align: center;
        }

        a.more:hover {
            background: #4579EA;
        }

        body {
            background-color: #F8F8F8;
        }
    </style>

</head>
<style>
    .floatButton {
        position: fixed;
        top: 200px;
        left: 1180px;
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0);
        background-image: url('../static/search.png');
        background-size: 60px 60px;
        border: none;
        cursor: pointer;
    }

    .matchitem {
        margin-top: 9px;
        border-bottom-width: 9px;
        margin-bottom: 9px;
        font-size: 18px;
    }

    @font-face {
        font-family: myFont;
        src: url("static/fonts/字体视界-小南同学.ttf")
    }

    .searchBox {
        background-color: rgba(227, 246, 235, 0.77);
        border-color: #0d6490ad;
        color: black;
    }

    .searchBtn {
        background-color: rgba(234, 255, 203, 0.91);
        margin-bottom: 15px;
    }

    .searchBtn,
    .searchBox {
        left: 25%;
        top: 35px;
        height: 36px;
        border-radius: 20px;
        text-align: center;
        font-family: myFont;
    }

    .fontStyle {
        font-family: 隶书;
        font-weight: 100;
        font-size: 30px;
    }


    #matchlist > div:hover {
        background-color: rgba(33, 150, 243, .1);
    }
</style>

<button class="body floatButton" onclick="$('.extend').css('display','block');
                    $('#head').css('display','block');
                    $('.body').css('display','none');
                    $(body).css('background-color','#dcf5e6');">
</button>
<div id="head" style="display:none;">
    <form class="layui-form" action="##" onsubmit="return false">
        <div class="layui-form-item">

            <div>
                <button class="extend layui-input-inline searchBtn" onclick="$('.extend').css('display','none');
                    $('.body').css('display','block');$('#head').css('display','none');$(body).css('background-color','#F8F8F8');"
                        style="display : none; width:auto;padding: 0 10px 0 10px">
                    隐藏扩展
                </button>

                <input id="myinput" type="text" name="title" placeholder="请输入应用名称"
                       autocomplete="off" class="extend layui-input-inline searchBox" style="display: none;width:30%">

                <button class="extend layui-input-inline searchBtn"
                        style="display: none;; width:auto;padding: 0 10px 0 10px;"
                        lay-submit lay-filter="formDemo">
                    立即跳转
                </button>

            </div>
            <button class="body floatButton" onclick="$('.extend').css('display','block');
                    $('.body').css('display','none');$(body).css('background-color','#dcf5e6');">
            </button>

        </div>
    </form>
</div>
<div style="font-family: myFont;z-index: 999999;position: absolute;left: 45%;width: 200px;border-radius: 3px;background-color: rgba(255,255,255,0);cursor: pointer;padding-left: 10px;margin-top: 50px;">
    <ul id="matchlist">

    </ul>
</div>
<div class="extend " style="display: none">
    <div class="demo">
        <div class="container" style="width: 200px">
            <div class="row" style="width: 200px">
                <div class="col-md-12" style="width: 200px">

                    <div class="navbar" id="navbar1">
                        <img id="img1" src="static/img/searchIcon/base.svg"
                             style="width: 150px;height:150px;;">
                        <ul class="menu">
                            <li class="li1">
                                <button id='img1_1'
                                        style="background-image: url('static/img/searchIcon/news.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>

                            </li>
                            <li class="li1">
                                <button id='img1_2'
                                        style="background-image: url('static/img/searchIcon/activity.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div style="position: relative;top: -40px; text-align: center;">
                        <label class="fontStyle" id="label1">
                            基础功能
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="demo">
        <div class="container" style="width: 200px">
            <div class="row" style="width: 200px">
                <div class="col-md-12" style="width: 200px;">
                    <div class="navbar" id="navbar2">

                        <img id="img2" src="static/img/searchIcon/teachAff.svg"
                             style="width: 150px;height:150px;;">
                        <ul class="menu">
                            <li class="li2">
                                <button id='img2_1'
                                        style="background-image: url('static/img/searchIcon/grade.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li2">
                                <button id='img2_2'
                                        style="background-image: url('static/img/searchIcon/exam.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li2">
                                <button id='img2_3'
                                        style="background-image: url('static/img/searchIcon/absence.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li2">
                                <button id='img2_4'
                                        style="background-image: url('static/img/searchIcon/register.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li2">
                                <button id='img2_5'
                                        style="background-image: url('static/img/searchIcon/courses.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li2">
                                <button id='img2_6'
                                        style="background-image: url('static/img/searchIcon/classroom.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div style="position: relative;top: -40px; text-align: center;">
                        <label class="fontStyle" id="label2">
                            教务管理
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="demo">
        <div class="container" style="width: 200px">
            <div class="row" style="width: 200px">
                <div class="col-md-12" style="width: 200px;">
                    <div class="navbar" id="navbar3">

                        <img id="img3" src="static/img/searchIcon/dormitory.svg"
                             style="width: 150px;height:150px;;">
                        <ul class="menu">
                            <li class="li3">
                                <button id='img3_1'
                                        style="background-image: url('static/img/searchIcon/livingPay.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li3">
                                <button id='img3_2'
                                        style="background-image: url('static/img/searchIcon/card.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li3">
                                <button id='img3_3'
                                        style="background-image: url('static/img/searchIcon/zhangdan.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li3">
                                <button id='img3_4'
                                        style="background-image: url('static/img/searchIcon/sleep.svg');background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div style="position: relative;top: -40px; text-align: center;">
                        <label class="fontStyle" id="label3">
                            舍区管理
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="demo">
        <div class="container" style="width: 200px">
            <div class="row" style="width: 200px">
                <div class="col-md-12" style="width: 200px;">
                    <div class="navbar" id="navbar4">

                        <img id="img4" src="static/img/searchIcon/campus.svg"
                             style="width: 150px;height:150px;;">
                        <ul class="menu">
                            <li class="li4">
                                <button id='img4_1' style="background-image: url('static/img/searchIcon/bus.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li4">
                                <button id='img4_2' style="background-image: url('static/img/searchIcon/lostandfound.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li4">
                                <button id='img4_3' style="background-image: url('static/img/searchIcon/send.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%">
                                </button>
                            </li>
                            <li class="li4">
                                <button id='img4_4' style="background-image: url('static/img/searchIcon/books.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%; font-size: 12px;">
                                </button>
                            </li>
                            <li class="li4">
                                <button id='img4_5' style="background-image: url('static/img/searchIcon/return.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%; font-size: 12px;">
                                </button>
                            </li>
                            <li class="li4">
                                <button id='img4_6' style="background-image: url('static/img/searchIcon/map.svg');
                            background-position: center center; background-repeat: no-repeat; background-size: 80% 80%; font-size: 12px;">
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div style="position: relative;top: -40px; text-align: center;">
                        <label class="fontStyle" id="label4">
                            校园服务
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="Body" class="body" style="display: block">

    <ul class="mylayui-nav" style="z-index:1000;margin-left: 20px">
        <li class="mylayui-nav-item"><a href="/index">首页</a></li>
        <li class="mylayui-nav-item">
            <a id="teachAffairJump" href="#" th:onclick="teachAffairJump([[${role}]])">教务管理</a>
        </li>
        <li class="mylayui-nav-item"><a href="/mod3/index3">舍区管理</a></li>
        <li class="mylayui-nav-item"><a href="/mod3/index4">校园服务</a></li>
        <li class="mylayui-nav-item"><a href="">

            <img th:src="${headPic}" class="mylayui-nav-img" id="headPic">
            <span class="layui-badge-dot" id="dot" th:if="${msgs.size() gt 0}"></span>
        </a>

            <dl class="mylayui-nav-child">
                <dd>
                    <a href="" id="role" th:text="${role}"></a>
                </dd>
                <dd th:if="${username} ne ''">
                    <a href="/message">
                        消息
                        <span class="layui-badge" id="msgCount"
                              th:text="${msgs.size()}" th:if="${msgs.size()} gt 0">
                    </span>
                    </a>
                </dd>
                <dd>
                    <a href="/logout" th:if="${username} ne ''">
                        注销
                    </a>
                    <a href="/login" th:if="${username} eq ''">
                        登录
                    </a>
                </dd>
            </dl>
        </li>
    </ul>

    <blockquote class="layui-elem-quote" style="margin-left: 100px">
        校内新闻
        <a href="/news" class="more">
            >>查看更多新闻
        </a>
    </blockquote>

    <div class="layui-carousel" id="test1" style="float: left;">
        <div carousel-item>
            <div><img src="../static/1.png" style="width:100%;height:100%"></div>
            <div><img src="../static/2.png" style="width:100%;height:100%"></div>
            <div><img src="../static/3.png" style="width:100%;height:100%"></div>
            <div><img src="../static/4.png" style="width:100%;height:100%"></div>
        </div>
    </div>

    <div>
        <table class="layui-table" style="width: 500px; float: left;
margin-left: 150px;">
            <thead>
            <tr>
                <th>要闻</th>
            </tr>
            </thead>
            <tbody th:each="_new, loopStatus:${news}">
            <tr th:if="${loopStatus.index} lt 6">
                <td><a target="_blank" th:href="${_new.getUrl()}" th:text="${_new.getTitle()}" class="linkNewsTopBold"
                       style="color: blue; text-decoration:underline">
                </a></td>
            </tr>
            </tbody>
        </table>
    </div>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <blockquote class="layui-elem-quote" style="float: left; margin-left: 100px">
        校园活动
        <a href="/activity" class="more" style="margin-left: 840px">
            >>查看更多活动
        </a>
    </blockquote>

    <div class="layui-bg-gray" style="padding: 60px; margin-left: 40px; margin-right: 50px">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6" th:each="activity:${activities}">
                <div class="layui-panel">
                    <a href="https://www.baidu.com" target="_blank">
                        <img th:src="${activity.getImgUrl()}" height="200px" width="300px">
                        <span style="font-size: x-small; color: blue; " th:text="${activity.getDescription()}"></span>
                    </a>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="../static/layui/layui.js"></script>
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '40%' //设置容器宽度
                , arrow: 'hover' //始终显示箭头
                , autoplay: true
            });
        });
    </script>

    </body>
</div>
<script type="text/html" id="barView">
    <a class="layui-btn layui-btn-xs" lay-event="jump">跳转</a>
</script>
<script>
    function teachAffairJump() {
        let role = "[[${role}]]";
        console.log("role: " + role);
        if (role === '教师') {
            $('#teachAffairJump').attr('href', '/teachAffairManagementForTeacher');
            gdatas[2]['url'] = "/teachAffairManagementForTeacher?page=ScoreQuery";
            gdatas[3]['url'] = "/teachAffairManagementForTeacher?page=null";
            gdatas[4]['url'] = "/teachAffairManagementForTeacher?page=LeaveRecordQuery";
            gdatas[5]['url'] = "/teachAffairManagementForTeacher?page=null";
            gdatas[6]['url'] = "/teachAffairManagementForTeacher?page=CourseScheduleQuery";
            gdatas[7]['url'] = "/teachAffairManagementForTeacher?page=ApplicationFormFill";
        } else if (role === '学生') {
            $('#teachAffairJump').attr('href', '/studentAffairManagement');
            gdatas[2]['url'] = "/studentAffairManagement?page=scoreQueryForStudent";
            gdatas[3]['url'] = "/studentAffairManagement?page=examScheduleQueryForStudent";
            gdatas[4]['url'] = "/studentAffairManagement?page=StudentAskForLeave";
            gdatas[5]['url'] = "/studentAffairManagement?page=null";
            gdatas[6]['url'] = "/studentAffairManagement?page=CourseScheduleQuery";
            gdatas[7]['url'] = "/studentAffairManagement?page=studentApplicationClassroom";
        } else {
            $('#teachAffairJump').attr('href', '/login');
        }
    }
</script>
<script>
    var gdatas = [{"name":"新闻查看","type":"basic","url":"/news","id":1,"index":"1_1"},
        {"name":"活动","type":"basic","url":"/activity","id":2,"index":"1_2"},
        {"name":"成绩查询","type":"education","url":null,"id":3,"index":"2_1"},
        {"name":"考试安排","type":"education","url":null,"id":4,"index":"2_2"},
        {"name":"请假考勤","type":"education","url":null,"id":5,"index":"2_3"},
        {"name":"报道注册","type":"education","url":null,"id":6,"index":"2_4"},
        {"name":"课表查询","type":"education","url":null,"id":7,"index":"2_5"},
        {"name":"教室申请","type":"education","url":null,"id":8,"index":"2_6"},
        {"name":"水电缴费","type":"dmtService","url":"/mod3/index3?page=payFee","id":9,"index":"3_1"},
        {"name":"校园卡充值","type":"dmtService","url":"/mod3/index3?page=chargeFee","id":10,"index":"3_2"},
        {"name":"消费记录","type":"dmtService","url":"/mod3/index3?page=payRecord2","id":10,"index":"3_3"},
        {"name":"归寝记录","type":"dmtService","url":"/mod3/index3?page=inOutRecord2","id":11,"index":"3_4"},
        {"name":"校车时刻表","type":"campusService","url":"/mod3/index4?page=car","id":12,"index":"4_1"},
        {"name":"失物招领列表","type":"campusService","url":"/mod3/index4?page=allGoods&root=1","id":13,"index":"4_2"},
        {"name":"失物招领发布","type":"campusService","url":"/mod3/index4?page=release&root=1","id":13,"index":"4_3"},
        {"name":"图书借阅","type":"campusService","url":"/mod3/index4?page=bookList2","id":14,"index":"4_4"},
        {"name":"已借图书管理","type":"campusService","url":"/mod3/index4?page=selfBookList2","id":14,"index":"4_5"},
        {"name":"地图","type":"campusService","url":"/mod3/index4?page=map","id":15,"index":"4_6"}
        ];
    teachAffairJump();
    var gcount;
    var keyword = "";
    var curtype = 'all';
    var layer;
    var tips_list;
    var index_list;

    $().ready(function () {
        layui.use('layer', function () {
            layer = layui.layer;
            // tips_list = ['新闻查看', '活动', '成绩管理', '考试安排', '考勤管理', '报道注册', '课表查询', '教室申请', '水电缴费', '校园卡充值', '归寝记录', '消费记录', '校车时刻表', '失物招领', '图书借阅', '地图'];
            tips_list=[]
            // index_list = ['1_1', '1_2', '2_1', '2_2', '2_3', '2_4', '2_5', '2_6', '3_1', '3_2', '3_3', '3_4' , '4_1', '4_2', '4_3', '4_4'];
            index_list=[]
            gdatas.forEach(item =>{
                tips_list.push(item.name);
                index_list.push(item.index);
            })
            for (let i = 0; i < tips_list.length; i++) {
                let id = '#img' + index_list[i];
                let tip = tips_list[i];
                let label = index_list[i].split("_")[0];
                console.log(id, tip);
                $(id).hover(function () {
                    layer.tips(tip, id);
                }, function () {
                    layer.closeAll('tips');
                });
            }
        });
        for (let i = 0; i < 4; i++) {
            let id = '#navbar' + (i + 1);
            let label = '#label' + (i + 1);
            $(id).hover(function () {
                $(label).fadeOut(500);
            }, function () {
                $(label).fadeIn(500);
            });
        }

        $('button').click(function () {
            let id = this.id.slice(3,);
            let index = index_list.indexOf(id);
            let name = tips_list[index];
            gdatas.forEach(function (item) {
                if (item.name === name) {
                    console.log(item.url);
                    window.open(item.url);
                }
            })

        })
    })

    // function getApps() {
    //     $.ajax({
    //         //几个参数需要注意一下
    //         type: "GET",//方法类型
    //         dataType: "json",//预期服务器返回的数据类型
    //         url: "http://localhost:8080/getApps",//url
    //         success: function (datas) {
    //             console.log(datas);//打印服务端返回的数据(调试用)
    //             gcount = datas.length;
    //             gdatas = datas;
    //             console.log('datas.length');//打印服务端返回的数据(调试用)
    //             // mprint();
    //         },
    //         error: function () {
    //             layer.msg("异常！");
    //         }
    //
    //     });
    // }


    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            let text = data.field.title;
            gdatas.forEach(function (item) {
                if (item.name === text) {
                    window.location.replace(item.url);
                }
            })
            return false;
        });
    });

    function selByStr(list, keyWord) {
        //字符串方法indexOf
        var len = list.length;
        var arr = [];
        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (list[i].name.indexOf(keyWord) >= 0) {
                arr.push(list[i]);
            }
        }
        return arr;
    }

    function selByType(list, keyType) {
        //字符串方法indexOf
        if (keyType == 'all') {
            return list;
        }
        var len = list.length;
        var arr = [];
        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (list[i].type.indexOf(keyType) >= 0) {
                arr.push(list[i]);
            }
        }
        return arr;
    }

    function selByReg(list, keyWord) {
        //正则表达式
        var len = list.length;
        var arr = [];
        var reg = new RegExp(keyWord);
        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (list[i].name.match(reg)) {
                arr.push(list[i]);
            }
        }
        return arr;
    }


    var li = document.getElementsByTagName("li");
    var butt = $("#addItem")[0];
    var input = $("#myinput")[0];
    console.log(butt);

    var matchlist = document.getElementById("matchlist")
    var arr = [];
    input.addEventListener("input", (e) => {
        if (e.target.value) {
            let reg = new RegExp(e.target.value, "i");
            removeall();
            queryitem(reg, e.target.value);
        } else {
            removeall();
        }
    });

    var index;

    function queryitem(reg, inputValue) {
        for (let i = 0; i < gdatas.length; i++) {
            index = gdatas[i].name.search(reg);
            let matchContent = "";
            if (index > -1) {
                let content = gdatas[i].name;
                // let content = li[i].textContent.replace(/\u00D7/g, "");
                let contentlist = content.split("");
                contentlist.map((item, i) => {
                    if (i === index) {
                        matchContent += "<strong>" + inputValue + "</strong>";
                    } else if (i < index || i >= index + inputValue.length) {
                        matchContent += item;
                    }
                })
                arr.push(matchContent);
            }
        }
        for (let i = 0; i < arr.length; i++) {
            let matchitem = document.createElement("div");
            matchitem.className = "matchitem";
            matchitem.innerHTML = arr[i];
            matchlist.appendChild(matchitem);
            matchitem.onclick = (e) => {
                input.value = e.target.textContent;
                removeall();
            }
        }

    }

    function removeall() {
        matchlist.innerHTML = "";
        arr = [];
    }

</script>
</html>